import { useIntersectionObserver } from '@vueuse/core'

export const lazyPlugin = {
  install(app){
    // 定义全局指令

app.directive('img-lazy',{
  mounted(el,binding){
    //el:指令绑定的dom元素  => img
    //binding :binding.value  指令等于号后面绑定的表达式的值 => 图片urL
    // console.log(el,binding.value)
    const { stop } = useIntersectionObserver(
      el,
      ([{ isIntersecting }]) => {
        // 判断是否进入可视区域
        if(isIntersecting){
          el.src = binding.value
          // 第一次图片加载完毕后  手动暂停
          stop()
        }
      }
    )
  }
})
  }
}